
//- This Source Code Form is subject to the terms of the Mozilla Public
//- License, v. 2.0. If a copy of the MPL was not distributed with this
//- file, You can obtain one at http://mozilla.org/MPL/2.0/.
//-
//- Copyright (c) 2021-present Kaleidos Ventures SL

section.colors-table

    div.project-values-title
        h2 {{ sectionName | translate }}
        button.btn-small.show-add-new(
            variant="primary"
            title="{{ addNewElementText }}"
        )
            span(ng-bind="addNewElementText")

    div.table-header
        div.row
            div.color-column(translate="COMMON.FIELDS.COLOR")
            div.status-name(translate="COMMON.FIELDS.NAME")
            div.options-column

    div.table-main
        div.sortable
            div(ng-repeat="value in values", tg-bind-scope)
                form(tg-bind-scope)
                    div.row.table-main.visualization
                        tg-svg(svg-icon="icon-draggable")

                        div.color-column
                            div.current-color(ng-style="{background: value.color}")

                        div.status-name
                            span {{ value.name }}

                        div.options-column
                            a.edit-value(href="")
                                tg-svg(
                                    svg-icon="icon-edit",
                                    title="{{'ADMIN.COMMON.TITLE_ACTION_EDIT_VALUE' | translate}}"
                                )

                            a.delete-value(href="")
                                tg-svg(
                                    svg-icon="icon-trash",
                                    title="{{'ADMIN.COMMON.TITLE_ACTION_DELETE_VALUE' | translate}}"
                                )

                    div.row.table-main.edition.hidden
                        div.color-column
                            tg-color-selector(
                                init-color="value.color"
                                on-select-color="value.color = color"
                            )

                        div.status-name
                            input(
                                name="name"
                                type="text"
                                placeholder="{{'ADMIN.TYPES.PLACEHOLDER_WRITE_NAME' | translate}}",
                                ng-model="value.name"
                                data-required="true"
                                data-maxlength="255"
                            )

                        div.options-column
                            a.save.e2e-save(href="")
                                tg-svg(
                                    title="{{'COMMON.SAVE' | translate}}",
                                    svg-icon="icon-check-empty"
                                 )
                            a.cancel(href="")
                                tg-svg(
                                    title="{{'COMMON.CANCEL' | translate}}",
                                    svg-icon="icon-close"
                                )

        form
            div.row.table-main.new-value.hidden
                div.color-column
                    tg-color-selector(
                        init-color="newValue.color"
                        on-select-color="newValue.color = color"
                    )

                div.status-name
                    input(
                        name="name"
                        type="text"
                        placeholder="{{'ADMIN.TYPES.PLACEHOLDER_WRITE_NAME' | translate}}",
                        ng-model="newValue.name"
                        data-required="true"
                        data-maxlength="255"
                    )

                div.options-column
                    a.add-new.e2e-save(href="")
                        tg-svg(
                            title="{{'COMMON.ADD' | translate}}",
                            svg-icon="icon-check-empty"
                        )
                    a.delete-new(href="")
                        tg-svg(
                            title="{{'COMMON.CANCEL' | translate}}",
                            svg-icon="icon-close"
                        )
